#taiji {
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  border: 2px solid $taiji-border-color;
  grid-template-columns: 1fr 1fr;
  /* animation: Rotate 4s linear infinite alternate; */
  .yin {
    background: #000;

    .body {
      transform: translateX(50%);

      .pointer {
        background: #fff;
      }
    }
  }

  .yang {
    background: #fff;

    .body {
      transform: translate(-50%, 100%);

      .pointer {
        background: #000;
      }
    }
  }

  .body {
    width: 100%;
    height: 50%;
    border-radius: 50%;
    background: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .pointer {
      width: 40%;
      height: 40%;
      border-radius: 50%;
      animation: breathing 1s linear infinite alternate;
      cursor: pointer;
    }
  }
}

.taiji-rotate {
  animation: Rotate 4s linear infinite;
}

@keyframes Rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes breathing {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1.1);
  }
}
